<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('异常类型占比分析图')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 95%">


    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>异常类型占比分析图</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <!--<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">-->
                    <!--<i class="fa fa-wrench"></i>-->
                <!--</a>-->
                <!--<ul class="dropdown-menu dropdown-user">-->
                    <!--<li><a href="graph_flot.html#">选项1</a>-->
                    <!--</li>-->
                    <!--<li><a href="graph_flot.html#">选项2</a>-->
                    <!--</li>-->
                <!--</ul>-->
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content h-full">
            <div class="echarts  h-full" id="echarts-pie-chart"></div>
        </div>
    </div>


</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">

    var prefix = ctx + "yf/reports";
    $(function () {


        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));


        $.post(prefix + "/echarets/exceptionTypePercent", {}, function (res) {
            if (res.code == 0) {
                var seriesData = res.rows;

                let total = 0;
                for(let i=0;i<seriesData.length;i++  ){
                    total = total + seriesData[i].value;
                }

                // var seriesData = [
                //     {name: "异常", value: 6},
                //     {name: "正常", value: 10}
                // ];

                var option = {
                    title: [{
                        text: '{name|预警总次数}\n{val|' + total + '}',
                        top: 'center',
                        left: 'center',
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 18,
                                    fontWeight: 'bold',       // normal
                                    color: '#333333',
                                    padding: [10, 0]
                                },
                                val: {
                                    fontSize: 20,
                                    fontWeight: 'bold',
                                    color: '#333333'
                                }
                            }
                        }
                    }, {
                        // text: '单位：Kg',
                        top: 20,
                        right: 20,
                        textStyle: {
                            fontSize: 14,
                            color: '#666666',
                            fontWeight: 400
                        }
                    }],
                    tooltip : {
                        trigger : 'item',
                        formatter : "{b} : {c}  ({d}%)"  // 鼠标滑上显示框   {a} <br/>{b} : {c}  ({d}%)
                    },
                    legend : {
                        show : true,
                        orient: 'vertical',     //  orient : 'horizontal',
                        align: 'left',
                        itemWidth: 15,      // 宽
                        itemHeight: 15,     // 高
                        itemGap: 20,        // 图例之间的间距
                        left : 10,
                        top : 30,
                        data: seriesData.map( c => { return c.name } ),
                textStyle : {
                    color : '#000',
                    fontSize : 16
                }
            },
                //设置饼状图每个颜色块的颜色
                color : [ '#61A0A8', '#FF905A', '#37BBF8'],
                    series : [ {
                    name : '颜色',
                    type : 'pie',
                    radius: ['40%', '60%'],
                    center : [ '50%', '50%' ],
                    label : {
                        normal : {
                            //饼形图显示格式
                            formatter : '{b|{b}：}{c|{c}次}  {per|{d}%}',
                            rich : {
                                b : {
                                    color : '#000',
                                    fontSize : 16,
                                    lineHeight : 33
                                },
                                c : {
                                    color : '#000',
                                    fontSize : 16,
                                    lineHeight : 33
                                },
                                //设置百分比数字颜色
                                per : {
                                    color : '#0E7CE2',
                                    fontSize : 16,
                                    padding : [ 5, 8 ],
                                    borderRadius : 2
                                }
                            }
                        }
                    },
                    data : seriesData,
                    itemStyle : {
                        emphasis : {
                            shadowBlur : 10,
                            shadowOffsetX : 0,
                            shadowColor : 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                } ]
            };

                pieChart.setOption(option);
                $(window).resize(pieChart.resize);

            }

        });



    });
</script>
</body>
</html>